<template>
    <el-dialog :title="title" :visible.sync="dialogForm" width="1100px" style="margin-top: -11vh">
        <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerNo']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间起">
                        <el-date-picker v-model="condition['search_GTE_planJobDate']"
                                        :picker-options="startPickerOptions" type="date" placeholder="起始日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间止">
                        <el-date-picker v-model="condition['search_LTE_planJobDate']" @change="handleChangeEnd"
                                        :picker-options="endPickerOptions" type="date" placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="到站" v-if="name==='zc'">
                        <el-input v-model="condition['search_LIKE_endStationName']"></el-input>
                    </el-form-item>
                    <el-form-item label="发站" v-if="name==='xc'">
                        <el-input v-model="condition['search_LIKE_stratStationName']"></el-input>
                    </el-form-item>
                    <el-form-item label="货名" v-if="name==='cx'">
                        <el-input v-model="condition['search_LIKE_cargoName']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态">
                        <el-select v-model="status" placeholder="请选择状态" clearable>
                            <el-option v-for="[key, val] in _dictJobStatusFilter" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16" style="margin-bottom: 18px;display: flex">
                    <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                    <el-button v-if="release&&voids" @click="handleCancel" :loading="$store.getters.loadingBtn">取消指令
                    </el-button>
                    <el-button v-if="xcNoWork&&zl" @click="handleXc" :loading="$store.getters.loadingBtn">开始卸车
                    </el-button>
                    <el-button v-if="cxyx&&zl" @click="handleCxyx" :loading="$store.getters.loadingBtn">开始拆箱移箱
                    </el-button>
                    <el-button v-if="startNzcc&&zl" @click="handleNzcc" :loading="$store.getters.loadingBtn">开始内转出场
                    </el-button>
                    <el-button v-if="startNzrc&&zl" @click="handleNzrc" :loading="$store.getters.loadingBtn">开始内转入场
                    </el-button>
                    <el-button v-if="name==='xc'" @click="handleSort" :loading="$store.getters.loadingBtn">
                        调整车皮进港顺序
                    </el-button>
                    <!--<div style="display: flex" class="ml-10" v-if="cxyx||startNzcc">-->
                    <div style="display: flex" class="ml-10" v-if="yard.length>0">
                        <div class="card-place-work">
                            <div class="place-work JKZX" style="margin:0"></div>
                            <span>未选中</span>
                        </div>
                        <div class="card-place-work">
                            <div class="place-work BBKCW" style="margin:0"></div>
                            <span>已选中</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <el-alert v-if="containerInfo.length>0&&name==='zc'" title="" class="alert-color" type="success"
                  :closable="false">
            <span v-show="condition['search_EQ_planStatus']==='NOOPERATE'" style="margin-right: 15px;">待触发装车指令的集装箱数量：{{ containerInfo.length }}</span>
            <span v-show="condition['search_EQ_planStatus']!=='NOOPERATE'" style="margin-right: 15px;">
                {{ condition['search_EQ_planStatus'] | _filterJobStatus }}装车指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="count.length>0">
                按到站统计：
                <span v-for="item in count" style="margin-right: 10px">{{ item.name }} {{ item.total }}</span>
            </span>
            <span v-show="multipleSelection.length>0">已选择：{{ multipleSelection.length }}</span>
        </el-alert>
        <el-alert v-if="containerInfo.length>0&&name==='xc'" title="" class="alert-color" type="success"
                  :closable="false">
            <span v-show="condition['search_EQ_planStatus']==='NOOPERATE'" style="margin-right: 15px;">待触发卸车指令的集装箱数量：{{ containerInfo.length }}</span>
            <span v-show="condition['search_EQ_planStatus']!=='NOOPERATE'" style="margin-right: 15px;">
                {{ condition['search_EQ_planStatus'] | _filterJobStatus }}卸车指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="count.length>0">
                按发站统计：
                <span v-for="item in count" style="margin-right: 10px">{{ item.name }} {{ item.total }}</span>
            </span>
            <span v-show="multipleSelection.length>0">已选择：{{ multipleSelection.length }}</span>
        </el-alert>
        <el-alert v-if="containerInfo.length>0&&name==='cx'" title="" class="alert-color" type="success"
                  :closable="false">
            <span v-show="condition['search_EQ_planStatus']==='NOOPERATE'" style="margin-right: 15px;">待触发拆箱移箱指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="condition['search_EQ_planStatus']!=='NOOPERATE'" style="margin-right: 15px;">
                {{ condition['search_EQ_planStatus'] | _filterJobStatusFilter }}拆箱移箱指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="count.length>0">
                按货名统计：
                <span v-for="item in count" style="margin-right: 10px">{{ item.name }} {{ item.total }}</span>
            </span>
            <span v-show="multipleSelection.length>0">已选择：{{ multipleSelection.length }}</span>
        </el-alert>
        <el-alert v-if="containerInfo.length>0&&name==='nzcc'" title="" class="alert-color" type="success"
                  :closable="false">
            <span v-show="condition['search_EQ_planStatus']==='NOOPERATE'" style="margin-right: 15px;">待触发内转出场指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="condition['search_EQ_planStatus']!=='NOOPERATE'" style="margin-right: 15px;">
                {{ condition['search_EQ_planStatus'] | _filterJobStatus }}内转出场指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="multipleSelection.length>0">已选择：{{ multipleSelection.length }}</span>
        </el-alert>
        <el-alert v-if="containerInfo.length>0&&name==='nzrc'" title="" class="alert-color" type="success"
                  :closable="false">
            <span v-show="condition['search_EQ_planStatus']==='NOOPERATE'" style="margin-right: 15px;">待触发内转入场指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="condition['search_EQ_planStatus']!=='NOOPERATE'" style="margin-right: 15px;">
                {{ condition['search_EQ_planStatus'] | _filterJobStatus }}内转入场指令的集装箱数量：{{ containerInfo.length }}
            </span>
            <span v-show="multipleSelection.length>0">已选择：{{ multipleSelection.length }}</span>
        </el-alert>
        <el-table ref="multipleTable" :data="containerInfo" border stripe max-height="500" class="mt-20"
                  @select="select" @select-all="selectAll"
                  @selection-change="handleSelectionChange">
            <el-table-column v-if="noSelect" fixed="left" type="selection" prop="id" width="55"></el-table-column>
            <el-table-column v-if="name==='xc'&&condition['search_EQ_planStatus']==='OPERATED'" fixed="left"
                             type="selection" prop="id" width="55"></el-table-column>
            <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
            <el-table-column prop="jobStatus" label="状态"  min-width="100">
                <template slot-scope='scope'>
                    <div v-if="condition['search_EQ_planStatus']==='MOVED'">
                        已移箱
                    </div>
                    <div v-else-if="condition['search_EQ_planStatus']==='RETURNED'">
                        已返场
                    </div>
                    <div v-else>{{scope.row.jobStatus | _filterJobStatus }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="planJobDate" :label="jobTime?'预计作业时间':'作业时间'" 
                             min-width="140"></el-table-column>
            <el-table-column v-if="name==='cx'" prop="cargoName" label="货名"  min-width="90"></el-table-column>
            <el-table-column v-if="name==='zc'" prop="endStationName" label="到站" 
                             min-width="120"></el-table-column>
            <el-table-column v-if="name==='xc'" prop="stratStationName" label="发站" 
                             min-width="120"></el-table-column>
            <el-table-column v-if="name==='zc'||name==='xc'" prop="wagonNo" label="车皮号"  min-width="140">
                <template slot-scope="scope">
                    {{ scope.row.wagonNo }}
                    <!--<div v-show="scope.row.transportMode==='TR'&&condition['search_EQ_planStatus'] === 'OPERATED'">-->
                    <!--<search-wagon-no @selectName="v=>handleEditWagon(v,scope.row,scope.$index)"-->
                    <!--:name="scope.row.wagonNo"></search-wagon-no>-->
                    <!--</div>-->
                    <!--<div v-show="scope.row.transportMode!=='TR'||condition['search_EQ_planStatus'] !== 'OPERATED'">{{ scope.row.wagonNo }}</div>-->
                </template>
            </el-table-column>
            <el-table-column prop="wagonSortNo" label="进港顺序"  min-width="120"></el-table-column>
            <el-table-column prop="containerNo" label="箱号"  min-width="150"></el-table-column>
            <el-table-column v-if="name==='nzcc'||name==='cx'" prop="presentField" label="现场位" 
                             min-width="140"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                <template slot-scope="scope">
                    {{ scope.row.ifHeavy | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column v-if="name!=='cx'" prop="cargoName" label="货名"  min-width="90"></el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
        </el-table>
        <div v-if="yard.length>0" class="mt-10 work-flex">
            <el-button @click="handleCarousel('prev')" type="primary" icon="el-icon-arrow-left" circle></el-button>
            <div style="padding: 0 20px;width: 100%">
                <el-carousel ref="carousel" :autoplay="false" indicator-position="none" trigger="click" arrow="never"
                             height="575px">
                    <el-carousel-item v-for="(item,index) in yard" :key="index">
                        <h3>{{ item.areaNo }}</h3>
                        <yard-map :maxBay="item.maxBay" :maxRow="item.row" :maxTier="item.maxTier"
                                  @handleClick="v=>handleClick(v,index)"></yard-map>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <el-button @click="handleCarousel('next')" type="primary" icon="el-icon-arrow-right" circle></el-button>
        </div>

        <el-dialog title="调整车皮进港顺序" :visible.sync="pickUpDialog" :lock-scroll="true" :modal="false" width="1100px">
            <el-row type="flex" justify="space-between">
                <el-col :span="10">
                    <div style="display: flex;justify-content: space-between">
                        <span>未排序列表</span>
                        <span style="color: #33CCCC;">提示：双击行跳转到已排序列表</span>
                    </div>
                    <el-table :data="pickTable" border max-height="500" min-height="500"
                              style="cursor: pointer;user-select: none;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none"
                              @row-dblclick="dbclickPick"
                              @row-click="clickPick">
                        <el-table-column label="原进港顺序" width="100">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isSelect">
                                    {{ scope.row.wagonSortNo }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wagonNo" label="车皮号">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isSelect">
                                    {{ scope.row.wagonNo }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stratStationName" label="发站">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isSelect">
                                    {{ scope.row.stratStationName }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="2"
                        style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="margin-bottom: 10px">
                        <el-button :disabled="pickTable.length===0" @click="rightPick(selectPickTable)"
                                   icon="el-icon-d-arrow-right"></el-button>
                    </div>
                    <div>
                        <el-button @click="leftPick(selectPickTableEd)" :disabled="pickTableEd.length===0"
                                   icon="el-icon-d-arrow-left"></el-button>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div style="display: flex;justify-content: space-between">
                        <span>已排序列表</span>
                        <span style="color: #9900FF;">共{{ total }}节</span>
                        <span style="color: #9900FF;">已排序{{ pickTableEd.length }}节</span>
                        <span style="color: #9900FF;">未排序{{ pickTable.length }}节</span>
                    </div>
                    <el-table :data="pickTableEd" border max-height="500" min-height="500"
                              style="cursor: pointer;user-select: none;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none"
                              @row-dblclick="dbclickPickEd"
                              @row-click="clickPickEd">
                        <el-table-column prop="wagonSortNo" label="新进港顺序" width="100">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isClick">
                                    {{ scope.$index +1 }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wagonNo" label="车皮号">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isClick">
                                    {{ scope.row.wagonNo }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stratStationName" label="发站">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isClick">
                                    {{ scope.row.stratStationName }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="原进港顺序" width="100">
                            <template slot-scope="scope">
                                <div v-bg="scope.row.isClick">
                                    {{ scope.row.wagonSortNo }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="2"
                        style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="margin-bottom: 10px">
                        <el-button @click="pickUpEd" :disabled="pickTableEd.length===0">上移</el-button>
                    </div>
                    <div>
                        <el-button @click="pickDownEd" :disabled="pickTableEd.length===0">下移</el-button>
                    </div>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pickUpDialog = false">取 消</el-button>
                <el-button type="primary" @click="pickUp" :loading="$store.getters.loadingBtn">确 定</el-button>
            </div>
        </el-dialog>

    </el-dialog>
</template>
<script>
    import {
        cancelCommand,
        commandRelease,
        getZcInfo,
        getXcInfo,
        getCxInfo,
        getNZCCInfo,
        getNZRCInfo,
        getCargo,
        getEndInfo,
        getStartInfo,
        editWagonNo,
        impWagonNo,
        jobWatchWagonSortNoId,
        jobWatchWagonSortNo
    } from "@/api/middleControl/middleControl";
    import searchWagonNo from '@/components/autocomplete/autoSearchWagonNo'
    import yardMap from "../common/yardMap";
    import { getYardMap } from "@/api/yardPlan/yardPlan";
    import { getLocalTime } from "@/utils/dateFormat";

    function swapArray(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
    }

    export default {
        components: { searchWagonNo, yardMap },
        data() {
            return {
                dialogForm: false,
                condition: {
                    search_EQ_planStatus: ""
                },
                containerInfo: [],
                name: "",
                multipleSelection: [],
                zl: true,
                voids: true,
                count: [],
                yard: [],
                copyYard: [],
                info: [],
                status: '',
                pickUpDialog: false,
                isClick: true,
                pickTable: [],
                pickTableEd: [],
                selectPickTable: {},
                selectPickTableEd: {},
                total: 0,
            };
        },
        directives: {
            bg: {
                inserted(el, binding) {
                    if (binding.value) {
                        el.parentNode.parentNode.style.backgroundColor = '#409eff'
                    } else {
                        el.parentNode.parentNode.style.backgroundColor = '#ffffff'
                    }
                },
                update(el, binding) {
                    if (binding.value) {
                        el.parentNode.parentNode.style.backgroundColor = '#409eff'
                    } else {
                        el.parentNode.parentNode.style.backgroundColor = '#ffffff'
                    }
                },
            }
        },
        mounted() {
            document.onkeydown = (e => {
                if (this.pickUpDialog) {
                    if (e.keyCode === 13) {
                        this.rightPick(this.selectPickTable)
                    }
                    if (e.keyCode === 38) {
                        this.upOrDown(true)
                    }
                    if (e.keyCode === 40) {
                        this.upOrDown(false)
                    }
                }
            })
            this.condition['search_GTE_planJobDate'] = getLocalTime(new Date().getTime(), this.$set('YYYY-MM-DD'))
            this.condition['search_LTE_planJobDate'] = getLocalTime(new Date().getTime(), this.$set('YYYY-MM-DD'))
        },
        methods: {
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition);
                if (params.search_EQ_planStatus === 'MOVED') {
                    params.search_EQ_planStatus = 'RELEASE'
                    params.search_EQ_moveStatus = 'MOVED'
                }
                if (params.search_EQ_planStatus === 'RETURNED') {
                    params.search_EQ_planStatus = 'OPERATED'
                    params.search_EQ_moveStatus = 'RETURNED'
                }
                let param = JSON.parse(JSON.stringify(params))
                param.search_EQ_planStatus = this.status
                param.iDisplayLength = 9999
                if (this.name === "xc") {
                    param.sortType = 'wagonSortNo'
                    getXcInfo(param).then(res => {
                        this.containerInfo = res.data.aaData;
                        this.condition['search_EQ_planStatus'] = this.status
                    });
                    const xcParams = {
                        ...params,
                        search_EQ_planType: 'JCJH'
                    }
                    getStartInfo(xcParams).then(res => {
                        this.count = res.data.aaData
                    })
                } else if (this.name === "cx") {
                    getCxInfo(param).then(res => {
                        this.containerInfo = res.data.aaData;
                        this.condition['search_EQ_planStatus'] = this.status
                        this.handleYard()
                    });
                    const cxParams = {
                        ...params,
                        search_EQ_planType: 'CXJH',
                    }
                    getCargo(cxParams).then(res => {
                        this.count = res.data.aaData
                    })
                } else if (this.name === 'nzcc') {
                    getNZCCInfo(param).then(res => {
                        this.containerInfo = res.data.aaData;
                        this.condition['search_EQ_planStatus'] = this.status
                        this.handleYard()
                    })
                } else if (this.name === 'nzrc') {
                    getNZRCInfo(param).then(res => {
                        this.containerInfo = res.data.aaData;
                        this.condition['search_EQ_planStatus'] = this.status
                    })
                } else if (this.name === 'zc') {
                    getZcInfo(param).then(res => {
                        this.containerInfo = res.data.aaData
                        this.condition['search_EQ_planStatus'] = this.status
                    })
                    const zcParams = {
                        ...params,
                        search_EQ_planType: 'TXJH',
                    }
                    getEndInfo(zcParams).then(res => {
                        this.count = res.data.aaData
                    })
                }
            },
            closeForm() {
                this.dialogForm = false;
                this.condition = {
                    search_EQ_planStatus: ""
                };
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            select(selection, val) {
                // console.log(selection,val)
                let yard = this.yard
                for (let i = 0; i < yard.length; i++) {
                    for (let j = 0; j < yard[i].row.length; j++) {
                        const el = yard[i].row[j]
                        for (let k = 0; k < el.length; k++) {
                            for (let l = 0; l < el[k].length; l++) {
                                const last = el[k][l]
                                // console.log(i,j,k,l)
                                // console.log(last)
                                let type = 'JKZX'
                                if (last.type === 'JKZX') {
                                    type = 'BBKCW'
                                }
                                // for (let m = 0; m < val.length; m++) {
                                if (last.containerNo === val.containerNo) {
                                    // console.log(i,j,k,l)
                                    // console.log(this.yard[i].row[j])
                                    if (this.yard[i].row[j][k][l].bayNo % 2 === 0) {
                                        this.yard[i].row[j][k].splice(l, 1, {
                                            containerNo: last.containerNo,
                                            type: type,
                                            bayNo: this.yard[i].row[j][k][l].bayNo
                                        })
                                        this.yard[i].row[j][k + 2].splice(l, 1, {
                                            containerNo: last.containerNo,
                                            type: type,
                                            bayNo: this.yard[i].row[j][k][l].bayNo,
                                            style: 'none'
                                        })
                                    } else {
                                        this.yard[i].row[j][k].splice(l, 1, {
                                            containerNo: last.containerNo,
                                            type: type,
                                            bayNo: this.yard[i].row[j][k][l].bayNo
                                        })
                                    }
                                    return
                                }
                                // }
                            }
                        }
                    }
                }
            },
            selectAll(val) {
                // console.log(val)
                if (this.condition.search_EQ_planStatus === 'NOOPERATE' && (this.name === 'cx' || this.name === 'nzcc')) {
                    let yard = this.yard
                    for (let i = 0; i < yard.length; i++) {
                        for (let j = 0; j < yard[i].row.length; j++) {
                            const el = yard[i].row[j]
                            for (let k = 0; k < el.length; k++) {
                                for (let l = 0; l < el[k].length; l++) {
                                    const last = el[k][l]
                                    // let type='JKZX'
                                    // if(last.type==='JKZX'){
                                    //     type='BBKCW'
                                    // }
                                    if (val.length > 0) {
                                        for (let m = 0; m < val.length; m++) {
                                            if (last.containerNo === val[m].containerNo) {
                                                // console.log(i,j,k,l)
                                                // console.log(this.yard[i].row[j])
                                                if (this.yard[i].row[j][k][l].bayNo % 2 === 0 && last.style === 'style') {
                                                    this.yard[i].row[j][k - 2].splice(l, 1, {
                                                        containerNo: last.containerNo,
                                                        type: 'BBKCW',
                                                        bayNo: this.yard[i].row[j][k][l].bayNo
                                                    })
                                                    this.yard[i].row[j][k].splice(l, 1, {
                                                        containerNo: last.containerNo,
                                                        type: 'BBKCW',
                                                        bayNo: this.yard[i].row[j][k][l].bayNo,
                                                        style: 'none'
                                                    })
                                                } else {
                                                    this.yard[i].row[j][k].splice(l, 1, {
                                                        containerNo: last.containerNo,
                                                        type: 'BBKCW',
                                                        bayNo: this.yard[i].row[j][k][l].bayNo
                                                    })
                                                }
                                                // return
                                            }
                                        }
                                    } else {
                                        if (last.containerNo) {
                                            if (last.bayNo % 2 === 0 && last.style === 'style') {
                                                this.yard[i].row[j][k - 2].splice(l, 1, {
                                                    containerNo: last.containerNo,
                                                    type: 'JKZX',
                                                    bayNo: this.yard[i].row[j][k][l].bayNo
                                                })
                                                this.yard[i].row[j][k].splice(l, 1, {
                                                    containerNo: last.containerNo,
                                                    type: 'JKZX',
                                                    bayNo: this.yard[i].row[j][k][l].bayNo,
                                                    style: 'none'
                                                })
                                            } else {
                                                this.yard[i].row[j][k].splice(l, 1, {
                                                    containerNo: last.containerNo,
                                                    type: 'JKZX',
                                                    bayNo: this.yard[i].row[j][k][l].bayNo
                                                })
                                            }
                                        }

                                    }
                                }
                            }
                        }
                    }
                }
            },
            handleCarousel(type) {
                if (type === 'prev') {
                    this.$refs.carousel.prev()
                } else {
                    this.$refs.carousel.next()
                }
            },
            // 取消指令
            handleCancel() {
                if (this.multipleSelection.length === 0) {
                    this.$message({ message: "请先选择一条数据!", type: "error" });
                    return null;
                }
                let data = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i];
                    data.push({ id: el.id });
                }
                cancelCommand(data).then(res => {
                    this.$message({ message: "取消成功!", type: "success" });
                    this.loadData();
                });
            },
            // 卸车
            handleXc() {
                if (this.multipleSelection.length === 0) {
                    this.$message({ message: "请先选择一条数据!", type: "error" });
                    return null;
                }
                let data = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i];
                    // console.log(el);
                    data.push({
                        containerNo: el.containerNo,
                        planNo: el.planNo,
                        planType: el.planType,
                        transportMode: el.transportMode,
                        jobPurpose: "JC",
                        containerType: el.containerType,
                        containerSize: el.containerSize,
                        ifHeavy: el.ifHeavy,
                        tradeType: el.tradeType,
                        ownerId: el.ownerId,
                        ownerName: el.ownerName,
                        wagonSortNo: el.wagonSortNo,
                        // wagonNo:el.wagonNo
                    });
                }
                commandRelease(data).then(res => {
                    this.$message({ message: "卸车成功!", type: "success" });
                    this.loadData();
                });
            },
            // 开始拆箱移箱
            handleCxyx() {
                if (this.multipleSelection.length === 0) {
                    this.$message({ message: "请先选择一条数据!", type: "error" });
                    return null;
                }
                let data = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i];
                    data.push({
                        containerNo: el.containerNo,
                        planNo: el.planNo,
                        planType: el.planType,
                        transportMode: el.transportMode,
                        jobPurpose: "CXYX",
                        containerType: el.containerType,
                        containerSize: el.containerSize,
                        ifHeavy: el.ifHeavy,
                        tradeType: el.tradeType,
                        ownerId: el.ownerId,
                        ownerName: el.ownerName,
                    });
                }
                commandRelease(data).then(res => {
                    this.$message({ message: "拆箱移箱成功!", type: "success" });
                    this.loadData();
                });
            },
            handleNzcc() {
                if (this.multipleSelection.length === 0) {
                    this.$message({ message: "请先选择一条数据!", type: "error" });
                    return null;
                }
                let data = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i]
                    data.push({
                        containerNo: el.containerNo,
                        planNo: el.planNo,
                        planType: el.planType,
                        transportMode: el.transportMode,
                        jobPurpose: "NZCC",
                        containerType: el.containerType,
                        containerSize: el.containerSize,
                        ifHeavy: el.ifHeavy,
                        tradeType: el.tradeType,
                        ownerId: el.ownerId,
                        ownerName: el.ownerName
                    })
                }
                commandRelease(data).then(res => {
                    this.$message({ message: "内转出场成功!", type: "success" });
                    this.loadData();
                });
            },
            handleNzrc() {
                if (this.multipleSelection.length === 0) {
                    this.$message({ message: "请先选择一条数据!", type: "error" });
                    return null;
                }
                let data = [];
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i]
                    data.push({
                        containerNo: el.containerNo,
                        planNo: el.planNo,
                        planType: el.planType,
                        transportMode: el.transportMode,
                        jobPurpose: "NZRC",
                        containerType: el.containerType,
                        containerSize: el.containerSize,
                        ifHeavy: el.ifHeavy,
                        tradeType: el.tradeType,
                        ownerId: el.ownerId,
                        ownerName: el.ownerName
                    })
                }
                commandRelease(data).then(res => {
                    this.$message({ message: "内转入场成功!", type: "success" });
                    this.loadData();
                });
            },
            handleChangeEnd(val) {
                // this.condition["search_LTE_planJobDate"] = val
                //     ? val.split(" ")[0] + " 23:59:59"
                //     : val;
            },
            handleEditWagon(val, item, index) {
                // console.log(val, item)
                // if (val) {
                let data = {
                    planNo: item.planNo,
                    id: item.id,
                    containerNo: item.containerNo,
                    wagonNo: val,
                }
                editWagonNo(data).then(res => {
                    this.loadData()
                })
                // } else {
                //     this.loadData()
                // }
            },
            handleYard() {
                this.yard = []
                if (this.containerInfo.length > 0 && this.condition.search_EQ_planStatus === 'NOOPERATE') {
                    let containerInfo = this.containerInfo.filter(f => {
                        return f.presentField.indexOf('-') !== -1
                    })
                    console.log(containerInfo)
                    this.info = this.$assist.arrayUnique(containerInfo, 'currAreaNo')
                    // let info = this.$assist.arrayUnique(this.containerInfo, 'currAreaNo')
                    this.handleAsync(0)
                    // for (let j = 0; j < info.length; j++) {
                    //
                    // }
                }
            },
            handleAsync(j) {
                let info = this.info
                let yard = []
                if (j < this.info.length) {
                    let params = {
                        search_EQ_areaNo: info[j].currAreaNo
                    }
                    getYardMap(params).then(res => {
                        let data = res.data;
                        if (data.maxBay % 2 === 0) {
                            data.maxBay = data.maxBay + 1;
                        }
                        // this.maxBay = data.maxBay;
                        // this.maxTier = data.maxTier;
                        let [maxBay, maxRow, maxTier] = [
                            data.maxBay,
                            data.maxRow,
                            data.maxTier
                        ];
                        let tier = [];
                        for (let i = 0; i < maxTier; i++) {
                            tier.push({
                                containerNo: "",
                                type: ""
                            });
                        }
                        let bayNum = maxBay;
                        let bay = [];
                        for (let i = 0; i < bayNum + 1; i++) {
                            bay.push(tier);
                        }
                        let row = [];
                        for (let i = 0; i < maxRow; i++) {
                            row.push(bay);
                        }
                        // console.log(row);
                        for (let i = 0; i < this.containerInfo.length; i++) {
                            const el = this.containerInfo[i]
                            if (el.currAreaNo === info[j].currAreaNo) {
                                yard.push(el)
                            }
                        }
                        let setRow = JSON.parse(JSON.stringify(row))
                        for (let i = 0; i < yard.length; i++) {
                            const el = yard[i]
                            // console.log(el);
                            if (el.currBayNo % 2 === 0) {
                                setRow[Number(el.currRowNo - 1)][Number(el.currBayNo) - 1].splice(el.currTierNo - 1, 1, {
                                    containerNo: el.containerNo,
                                    type: 'JKZX',
                                    bayNo: Number(el.currBayNo)
                                });
                                setRow[Number(el.currRowNo - 1)][Number(el.currBayNo) + 1].splice(el.currTierNo - 1, 1, {
                                    containerNo: el.containerNo,
                                    type: 'JKZX',
                                    bayNo: Number(el.currBayNo),
                                    style: "none"
                                });
                            } else {
                                // console.log(el.currTierNo);
                                setRow[Number(el.currRowNo - 1)][Number(el.currBayNo)].splice(el.currTierNo - 1, 1, {
                                    containerNo: el.containerNo,
                                    type: 'JKZX',
                                    bayNo: Number(el.currBayNo)
                                });
                            }
                        }
                        this.yard.push({ row: setRow, maxBay: data.maxBay, maxTier: maxTier, areaNo: data.areaNo })
                        this.copyYard = this.$assist.deepcopy(this.yard)
                        // console.log(this.yard)
                        this.handleAsync(j + 1)
                    })
                }
            },
            handleClick(item, index) {
                // console.log(item,index)
                if (!item.containerNo) {
                    return
                }
                this.containerInfo.forEach(row => {
                    if (row.containerNo === item.containerNo) {
                        this.$refs.multipleTable.toggleRowSelection(row)
                    }
                })
                let type = 'JKZX'
                if (item.type === 'JKZX') {
                    type = 'BBKCW'
                }
                if (item.bay % 2 === 0) {
                    this.yard[index].row[item.row][item.bay - 1].splice(item.tier, 1, {
                        containerNo: item.containerNo,
                        type: type,
                        bayNo: item.bay
                    })
                    this.yard[index].row[item.row][item.bay + 1].splice(item.tier, 1, {
                        containerNo: item.containerNo,
                        type: type,
                        bayNo: item.bay,
                        style: "none"
                    })
                } else {
                    this.yard[index].row[item.row][item.bay].splice(item.tier, 1, {
                        containerNo: item.containerNo,
                        type: type,
                        bayNo: item.bay
                    })
                }
            },
            handleImport(data) {
                console.log(data)
                impWagonNo(data).then(res => {
                    this.$message({ message: '导入成功!', type: 'success' })
                    this.loadData()
                })
            },
            handleSort() {
                if (this.multipleSelection.length !== 1) {
                    this.$message({ message: '请选择一条数据!', type: 'error' })
                    return
                }
                if (this.isClick) {
                    jobWatchWagonSortNoId(this.multipleSelection[0].id).then(res => {
                        this.isClick = false
                        this.total = res.data.aaData.length
                        this.pickTable = res.data.aaData
                        if (this.pickTable.length > 0) {
                            this.pickTable.splice(0, 1, { ...this.pickTable[0], isSelect: true })
                            this.selectPickTable = this.pickTable[0]
                        }
                        this.pickUpDialog = true
                    })
                }

            },
            clickPick(row, event, column) {
                for (let i = 0; i < this.pickTable.length; i++) {
                    const el = this.pickTable[i]
                    if (el.isSelect) {
                        this.pickTable.splice(i, 1, { ...this.pickTable[i], isSelect: false })
                    }
                    if (el.wagonNo === row.wagonNo) {
                        this.pickTable.splice(i, 1, { ...this.pickTable[i], isSelect: true })
                        this.selectPickTable = this.pickTable[i]
                    }
                }
                console.log(this.pickTable)
                console.log(row, event, column)
            },
            dbclickPick(row, event) {
                console.log(row)
                let index = 0
                for (let i = 0; i < this.pickTable.length; i++) {
                    const el = this.pickTable[i]
                    if (el.wagonNo === row.wagonNo) {
                        index = i
                    }
                }
                console.log(index)
                this.pickTable.splice(index, 1)
                console.log(this.pickTable)
                if (this.pickTable.length > 0) {
                    this.pickTable.splice(0, 1, { ...this.pickTable[0], isSelect: true })
                    this.selectPickTable = this.pickTable[0]
                } else {
                    this.selectPickTable = []
                }
                let isClick = false
                if (this.pickTableEd.length === 0) {
                    isClick = true
                }
                this.pickTableEd.push({ ...row, isClick })
                if (this.pickTableEd.length === 1) {
                    this.selectPickTableEd = this.pickTableEd[0]
                }
            },
            rightPick(row) {
                console.log(row, row.isSelect)
                if (row.isSelect) {
                    this.dbclickPick(row)
                } else {
                    this.$message({ message: '请先选择一条数据', type: 'error' })
                }
            },
            leftPick(row) {
                if (row.isClick) {
                    this.dbclickPickEd(row)
                } else {
                    this.$message({ message: '请先选择一条数据', type: 'error' })
                }
            },
            clickPickEd(row, event, column) {
                for (let i = 0; i < this.pickTableEd.length; i++) {
                    const el = this.pickTableEd[i]
                    if (el.isClick) {
                        this.pickTableEd.splice(i, 1, { ...this.pickTableEd[i], isClick: false })
                    }
                    if (el.wagonNo === row.wagonNo) {
                        this.pickTableEd.splice(i, 1, { ...this.pickTableEd[i], isClick: true })
                        this.selectPickTableEd = this.pickTableEd[i]
                    }
                }
            },
            dbclickPickEd(row, event) {
                console.log(row)
                let index = 0
                for (let i = 0; i < this.pickTableEd.length; i++) {
                    const el = this.pickTableEd[i]
                    if (el.wagonNo === row.wagonNo) {
                        index = i
                    }
                }
                this.pickTableEd.splice(index, 1)
                let isSelect = false
                if (this.pickTable.length === 0) {
                    isSelect = true
                }
                this.pickTable.push({ ...row, isSelect })
                if (this.pickTable.length === 1) {
                    this.selectPickTable = this.pickTable[0]
                }
                if (this.pickTableEd.length > 0) {
                    this.pickTableEd.splice(0, 1, { ...this.pickTableEd[0], isClick: true })
                    this.selectPickTableEd = this.pickTableEd[0]
                } else {
                    this.selectPickTableEd = []
                }
            },
            pickUpEd() {
                let index = 0
                this.pickTableEd.forEach((f, i) => {
                    if (f.isClick) {
                        index = i
                    }
                })
                if (index !== 0) {
                    swapArray(this.pickTableEd, index - 1, index);
                } else {
                    this.$message({ message: '无法上移', type: 'error' })
                }
            },
            pickDownEd() {
                let index = 0
                this.pickTableEd.forEach((f, i) => {
                    if (f.isClick) {
                        index = i
                    }
                })
                console.log(index, this.pickTableEd.length)
                if (index + 1 !== this.pickTableEd.length) {
                    swapArray(this.pickTableEd, index, index + 1);
                } else {
                    this.$message({ message: '无法下移', type: 'error' })
                }
            },
            upOrDown(bool) {
                let index = 0
                for (let i = 0; i < this.pickTable.length; i++) {
                    const el = this.pickTable[i]
                    if (el.isSelect) {
                        index = i
                        this.pickTable.splice(i, 1, { ...el, isSelect: false })
                    }
                }
                if (bool) {
                    if (index === 0) {
                        index === this.pickTable.length - 1
                    } else {
                        index = index - 1
                    }
                } else {
                    if (index === this.pickTable.length - 1) {
                        index = 0
                    } else {
                        index = index + 1
                    }
                }
                this.pickTable.splice(index, 1, { ...this.pickTable[index], isSelect: true })
                this.selectPickTable = this.pickTable[index]
            },
            pickUp() {
                if (this.pickTable.length !== 0) {
                    this.$message({ message: '还有未排序车皮，不能确认！', type: 'error' })
                    return
                }
                let data = []
                for (let i = 0; i < this.pickTableEd.length; i++) {
                    const el = this.pickTableEd[i]
                    data.push({
                        id: el.id,
                        stratStationCode: el.stratStationCode,
                        stratStationName: el.stratStationName,
                        trainNo: el.trainNo,
                        wagonNo: el.wagonNo,
                        wagonSortNo: i + 1,
                    })
                }
                jobWatchWagonSortNo(data).then(res => {
                    this.$message({ message: '排序成功!', type: 'success' })
                    this.pickUpDialog = false
                })
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_planJobDate"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_planJobDate"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime() - 60 * 60 * 24 * 1000;
                        } else {
                            return false;
                        }
                    }
                };
            },
            title() {
                if (this.name === "zc") {
                    return "装车控制";
                } else if (this.name === "xc") {
                    return "卸车控制";
                } else if (this.name === "cx") {
                    return "拆箱控制";
                } else if (this.name === "nzrc") {
                    return "内转入场控制";
                } else if (this.name === "nzcc") {
                    return "内转出场控制";
                } else {
                    return "作业控制";
                }
            },
            // 已发布
            release() {
                return this.condition["search_EQ_planStatus"] === "RELEASE"
            },
            // 卸车未作业
            xcNoWork() {
                return (
                    this.condition["search_EQ_planStatus"] === "NOOPERATE" &&
                    this.name === "xc"
                );
            },
            cxyx() {
                let state = this.condition['search_EQ_planStatus']
                return this.name === 'cx' && state === 'NOOPERATE'
            },
            // 不显示多选
            noSelect() {
                return this.condition['search_EQ_planStatus'] !== 'OPERATED'
            },
            jobTime() {
                return this.condition['search_EQ_planStatus'] === 'NOOPERATE'
            },
            startNzcc() {
                return this.condition['search_EQ_planStatus'] === 'NOOPERATE' && this.name === 'nzcc'
            },
            startNzrc() {
                return this.condition['search_EQ_planStatus'] === 'NOOPERATE' && this.name === 'nzrc'
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$emit('load')
                    this.condition = {
                        search_EQ_planStatus: ""
                    }
                    this.$parent.workTable = false
                }
            },
            pickUpDialog(bool) {
                if (!bool) {
                    this.pickTable = []
                    this.pickTableEd = []
                    this.selectPickTable = {}
                    this.selectPickTableEd = {}
                    this.isClick = true
                }
            }
        },
    };
</script>
<style lang="scss" scoped>
    .work-flex {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .BBKCW {
        background-color: #5c9dff;
    }

    .JKZX {
        background-color: #c28efd;
    }

    .card-place-work {
        display: flex;
        width: 90px;
        margin-right: 20px;
        /*margin-bottom: 10px;*/
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
    }

    .card-place-work span {
        font-size: 13px;
    }

    .place-work {
        /* border: 1px solid rgb(245, 56, 56); */
        width: 34px;
        height: 22px;
        margin-bottom: 2px;
        cursor: pointer;
    }
</style>
